@use "@base/assets/settings" as settings;
@use "@base/assets/vuetify" as vuetify;

.cm-focused {
  outline: none !important;
}

// .cm-selectionBackground { display: none; }
.cm-focused .cm-selectionBackground { display: initial; background-color: rgba(var(--v-theme-codemirror-selection), 1) !important; }
.cm-cursor { border-left-color: rgb(var(--v-theme-on-surface)); }

.cm-gutters {
  background-color: rgba(var(--v-theme-on-surface), 0.05);
}


/* inline markdown styles */
.cm-content {
  font-family: settings.$body-font-family;

  .tok-h1, .tok-h2, .tok-h3, .tok-h4, .tok-h5, .tok-h6 {
    font-weight: bold;
  }
  .tok-h1 { font-size: 2em; }
  .tok-h2 { font-size: 1.75em; }
  .tok-h3 { font-size: 1.5em; }
  .tok-h4 { font-size: 1.25em; }
  .tok-h5 { font-size: 1.1em; }
  .tok-h6 { font-size: 1em; }

  .tok-strong { font-weight: bold }
  .tok-emphasis { font-style: italic; }
  .tok-strikethrough { text-decoration: line-through;}

  .tok-codeblock, .tok-inlinecode {
    font-family: monospace;
    color: vuetify.$code-color;
    background-color: rgba(var(--v-theme-on-surface), 0.05);
  }

  .tok-table {
    font-family: monospace;
  }

  .tok-footnote {
    vertical-align: super;
    font-size: 0.9em;
  }

  .tok-link, .tok-image, .tok-footnote {
    color: #7f8c8d;
  }
  .tok-url {
    color: #aab2b3;
    text-decoration: underline;
  }

  .tok-quote {
    color: #7f8c8d;
  }

  .tok-todo {
    background-color: settings.$risk-color-critical;
    color: white;
    padding-left: 0.2em;
    padding-right: 0.2em;
    border-radius: 10%;
  }

  // HTML tag highlighting
  .tok-tagname, .tok-anglebracket, .tok-attributename, .tok-attributevalue, .tok-comment { font-family: monospace; }
  .tok-tagname, .tok-anglebracket { color: #085; }
  .tok-attributename { color: #795da3; }
  .tok-attributevalue { color:  #a11; }
  .tok-comment { color: #940; }

}
